import React from 'react'
import {Row,Col,Input, Popconfirm,Button,  Dropdown,Icon ,Menu, Modal,Spin} from 'antd';
import Table from './Table'
import {orgList,query,addOrganization,deleteOrg ,addDepartment,addUser,deleteUser} from '../../services/organization'
const confirm = Modal.confirm;

class Organization extends React.Component {
  state = {
    loading:false,
    data:[],
    departmentParentId:'',
    memberParentId:'',
    departmentData:[],
    departmentCol:[],
    memberData:[],
    memberCol:[]    
  }
  
  componentDidMount() {
    orgList().then(data =>{
      
      this.setState({
        data:data.data
      })
    })
  }
  
  organizationClcik = (rec)=>{
    this.setState({
      loading:true
    })
    query(rec.id).then(data =>{
      this.setState({
        loading:false,
        departmentParentId:data.data.id,
        memberParentId:data.data.id,
        departmentData:data.data.sub_org,
        departmentCol:this.getColumns(`${rec.name} 下属部门`),
        memberData:data.data.user_list,
        memberCol:this.getColumns(`${rec.name} - 所属成员`)
      })
      
    })
  }

  departmentClick =(rec)=>{
    this.setState({
      loading:true
    })
    query(rec.id).then(data =>{
      this.setState({
        loading:false,
        memberParentId:data.data.id,
        memberData:data.data.user_list,
        // memberCol:this.getColumns(`${rec.name} - 所属成员`)
        memberCol:[{title:`${rec.name} - 所属成员`,dataIndex:'name',tableName:'user'}]
      })
    })
  }

  getColumns= (name)=>{
     return [{title:name,dataIndex:'name'}]
  }
  //添加 修改机构
  addorganization=(params,parentId,flag)=>{
    addOrganization(params,flag).then(data =>{
      let arr =[]; 
      if(flag === 'update'){
        const dataArr = this.state.data
        for(let i=0;i<dataArr.length;i++){
          if(dataArr[i].id == params.id){
            dataArr[i].name = params.name
          }
        }
        arr = [...dataArr]
      }else{
        arr = [...this.state.data,data.data]
      }
      this.setState({
        data:arr
      })
    })
  }

  delOrganization= (param)=>{
    const that =this;
    confirm({
      title: `你确定要删除${param.name}吗?`,
      onOk () {
        deleteOrg(param.id).then(data=>{
          const dataArr = [...that.state.data]
          that.setState({ data: dataArr.filter(item => item.id !== param.id) });
        })
      },
    })
  }
  //新增 修改部门
  addDepartment =(params,parentId,flag)=>{
    
    addDepartment({...params,parent_id:parentId},flag).then(data =>{
      let arr =[]; 
      if(flag === 'update'){
        const dataArr = this.state.departmentData
        for(let i=0;i<dataArr.length;i++){
          if(dataArr[i].id == params.id){
            dataArr[i].name = params.name
          }
        }
        arr = [...dataArr]
      }else{
        arr = [...this.state.departmentData,data.data]
      }
      this.setState({
        departmentData:arr
      })
      
    })
  }
  //删除部门
  delDepartment =(param,parentId)=>{
    const that =this;
    confirm({
      title: `你确定要删除${param.name}吗?`,
      onOk () {
        deleteOrg(param.id).then(data=>{
          const dataArr = [...that.state.departmentData]
          that.setState({ departmentData: dataArr.filter(item => item.id !== param.id) });
        })
      },
    })
  }

  //删除人员
  delMember =(param,parentId)=>{
    const that =this;
    confirm({
      title: `你确定要删除${param.name}吗?`,
      onOk () {
        deleteUser(`org_id=${parentId}&user_id=${param.id}`).then(data=>{
          const dataArr = [...that.state.memberData]
          that.setState({ memberData: dataArr.filter(item => item.id !== param.id) });
        })
      },
    })
  }
  //添加人员
  addUser =(params,parentId,flag)=>{
    const  param = {
      org_id:parentId,
      user_id: params.name
    }
    const that = this
    addUser(param).then(data =>{
      const arr = data[0].data.user_list
      that.setState({
        memberData:arr
      })
    })
  }

  render() {
  const col = [
      {title:"机构列表",dataIndex:'name'}
  ]

  return (
    <div className="myContainer" >
      <Spin spinning={this.state.loading}>
        <h2 className="link-title">组织机构</h2>
        <Row gutter={16}>
          <Col xl={{ span: 8 }} md={{ span:8 }}>
            <Table columns={col} data={this.state.data} onRowClcik={this.organizationClcik.bind(this)}
            save={this.addorganization}
            delete={this.delOrganization} />
          </Col>
          {
            this.state.departmentCol.length>0?
            <Col xl={{ span: 8 }} md={{ span:8 }}>
            <Table columns={this.state.departmentCol} 
            data={this.state.departmentData} 
            onRowClcik={this.departmentClick.bind(this)}
            parentId={this.state.departmentParentId}
            save={this.addDepartment}
            delete={this.delDepartment}

            />
          </Col>:''
          }
          {
            this.state.memberCol.length>0?
            <Col xl={{ span: 8 }} md={{ span:8 }}>
            <Table columns={this.state.memberCol} 
                    data={this.state.memberData} 
                    parentId={this.state.memberParentId}
                    save={this.addUser}
                    delete={this.delMember}
                    />
          </Col>:''
          }
          
        </Row>
      </Spin>
    </div>
  )
  }
}

export default Organization
